<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <hr />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="350" :lg="20" style="padding-left: 50px">

        <h2>欢迎使用指标体系管理系统</h2>
        <div class="showImg" >
          <img  @mouseover="changeInterval(true)"
                @mouseleave="changeInterval(false)"
                v-for="(item) in imgArr"
                :key="item.id"
                :src="item.url"

                v-show="item.id===currentIndex"
          >

          <div  @click="clickIcon('up')"   class="iconDiv icon-left">
            <i class="el-icon-caret-left"></i>
          </div>

          <div  @click="clickIcon('down')"  class="iconDiv icon-right">
            <i class="el-icon-caret-right"></i>
          </div>

          <div class="banner-circle">
            <ul>
              <li @click="changeImg(item.id)"
                  v-for="(item) in imgArr"
                  :key="item.id"
                  :class="item.id===currentIndex? 'active': '' "
              ></li>
            </ul>
          </div>
        </div>


      </el-col>


    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系我们</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 邮箱：xxxxxxx
            </p>
            <p>
              <i class="el-icon-user-solid"></i>
              小组：为什么小组
            </p>


          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">

      </el-col>
<!--      <el-col :xs="24" :sm="24" :md="12" :lg="8">-->
<!--        <el-card class="update-log">-->
<!--        -->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",

data() {
    return {
      // 版本号
      version: "3.8.5",
      imgUrl:"@/assets/images/index.jpg",
      currentIndex :0,//当前所在图片下标
      timer:null,//定时轮询
      imgArr:[
        {	id:0,
          url:require('@/assets/images/login-background.jpg'),

        },{
          id:1,
          url:require("@/assets/images/index1.jpg"),
        },{
          id:2,
          url:require("@/assets/images/index2.jpg"),
        },{
          id:3,
          url:require("@/assets/images/index.jpg"),
        },
      ]

    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");

    },

    //开启定时器
    startInterval(){
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(()=>{
        this.currentIndex++;
        if(this.currentIndex > this.imgArr.length-1){
          this.currentIndex = 0
        }
      },3000)
    },
    // 点击左右箭头
    clickIcon(val){
      if(val==='down'){
        this.currentIndex++;
        if(this.currentIndex===this.imgArr.length){
          this.currentIndex = 0;
        }
      }else{
        /* 第一种写法
        this.currentIndex--;
        if(this.currentIndex < 0){
          this.currentIndex = this.imgArr.length-1;
        } */
        // 第二种写法
        if(this.currentIndex === 0){
          this.currentIndex = this.imgArr.length;
        }
        this.currentIndex--;
      }
    },
    // 点击控制圆点
    changeImg(index){
      this.currentIndex = index
    },
    //鼠标移入移出控制
    changeInterval(val){
      if(val){
        clearInterval(this.timer)
      }else{
        this.startInterval()
      }
    }
  },
  //进入页面后启动定时轮询
  mounted(){
    this.startInterval()
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 5px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

* {
  padding: 0;
  margin: 0;
}
/* 清除li前面的圆点 */
li {
  list-style-type: none;
}
.showImg{
  position: relative;
  width: 650px;
  height: 400px;
  margin: 100px auto;
  overflow: hidden;
}
/* 轮播图片 */
.showImg img{
  width: 100%;
  height: 100%;
}

/* 箭头图标 */
.iconDiv{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 15px;
  background-color: rgba(125,125,125,.2);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}
.iconDiv:hover{
  background-color: white;
}
.icon-left{
  left: 10px;
}
.icon-right{
  right: 10px;
}

/* 控制圆点 */
.banner-circle{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.banner-circle ul{
  margin: 0 50px;
  height: 100%;
  text-align: center;
}
.banner-circle ul li{
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 7px;
  background-color: rgba(125,125,125,.8);
  cursor: pointer;
}
.active{
  background-color: black !important;
}

</style>
